<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UEditor</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 24px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #262626;
        }
        .description {
            color: #595959;
            margin-bottom: 24px;
            line-height: 1.6;
        }
        .editor-container {
            margin-bottom: 16px;
        }
        .btn {
            background: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 8px;
        }
        .btn:hover {
            background: #40a9ff;
        }
        .notice {
            background: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 16px;
            color: #d46b08;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">UEditor 富文本编辑器</h1>
        <p class="description">
            UEditor 是百度开发的富文本编辑器，功能丰富，支持多种媒体插入。
        </p>
        
        <div class="notice">
            注意：UEditor 需要服务器端支持，此处仅为演示界面。完整功能需要配置后端服务。
        </div>
        
        <div class="editor-container">
            <script id="editor" type="text/plain" style="width:100%;height:400px;">
                <p>这是 UEditor 编辑器的初始内容。</p>
                <p>UEditor 支持丰富的功能：</p>
                <ul>
                    <li>文本格式化</li>
                    <li>图片上传</li>
                    <li>视频插入</li>
                    <li>表格编辑</li>
                    <li>代码高亮</li>
                </ul>
            </script>
        </div>
        
        <button class="btn" onclick="getContent()">获取内容</button>
        <button class="btn" onclick="setContent()">设置内容</button>
    </div>

    <!-- UEditor 配置和脚本 -->
    <script type="text/javascript">
        // UEditor 配置
        window.UEDITOR_CONFIG = {
            UEDITOR_HOME_URL: 'https://unpkg.com/ueditor@1.4.3.3/dist/',
            serverUrl: '/ueditor/controller.jsp' // 这里需要配置实际的服务器地址
        };
    </script>
    <script src="https://unpkg.com/ueditor@1.4.3.3/dist/ueditor.config.js"></script>
    <script src="https://unpkg.com/ueditor@1.4.3.3/dist/ueditor.all.min.js"></script>
    <script src="https://unpkg.com/ueditor@1.4.3.3/dist/lang/zh-cn/zh-cn.js"></script>
    
    <script>
        var ue;
        
        // 延迟初始化，确保UEditor脚本加载完成
        setTimeout(function() {
            try {
                ue = UE.getEditor('editor', {
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
                        'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                        'link', 'unlink', 'anchor', '|',
                        'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'insertimage', 'emotion', 'insertvideo', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                        'print', 'preview', 'searchreplace', 'drafts', 'help'
                    ]],
                    autoHeightEnabled: true,
                    autoFloatEnabled: true
                });
            } catch (e) {
                console.error('UEditor 初始化失败:', e);
                document.getElementById('editor').innerHTML = '<div style="padding: 20px; border: 1px solid #ddd; background: #f9f9f9;">UEditor 加载失败，可能是网络问题或需要服务器端支持。</div>';
            }
        }, 1000);

        function getContent() {
            if (ue) {
                var content = ue.getContent();
                console.log(content);
                alert('内容已输出到控制台');
            } else {
                alert('编辑器未初始化');
            }
        }

        function setContent() {
            if (ue) {
                ue.setContent('<p>这是通过 JavaScript 设置的新内容</p>');
            } else {
                alert('编辑器未初始化');
            }
        }
    </script>
</body>
</html>